<template>
    <div class="more-container" @click.stop="handleDelByCommand">
        <el-dropdown :divided="true" @command="handleDelByCommand">
            <img class="more" src="../../static/more.png" />
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item v-if="data.type != 1" command="search">搜索</el-dropdown-item>
                    <el-dropdown-item command="delete">删除</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <el-drawer :with-header="true" custom-class="my-drawer" :size="250" modal v-model="show_search"
            title="esc 或者 点击右上角退出" :close-on-click-modal="false" direction="ttb">
            <Search @close="onClose" :data="props.data" :old_data="props.old_data"></Search>
        </el-drawer>
    </div>
</template>

<script setup>
import { shallowRef } from "vue-demi"
import Search from "../Search.vue";
import { Course, Chapter, Video } from "../../model/resource"
import { ShowTip } from "../../utils/utils";
import { ResourceType } from "../../libs/enum";

const props = defineProps({
    old_data: {},
    data: {
        default: {
            type: 2,
            id: 1,
            name: '第13章 机器学习'
        }
    }
})// type id key

const show_search = shallowRef(false)
async function  handleDelByCommand(command) {
    if (command == 'search') {
        show_search.value = true // 显示搜索内容
        console.log("搜搜")
    } else if (command == 'delete') {
        console.log("删除", props.old_data, props.data)
        if (props.old_data.splice) {

            let type = props.data.type
            let wait_del_id = props.data.id
            let model = null
            if (type == 2)
                model = new Chapter()
            else if (type == 3)
                model = new Course()
            else if (type == 1)
                model = new Video()
            let res = await model.del(wait_del_id)
            console.log('返沪的结果',res)
            if (`${res.status}`.startsWith('2')) {
                for (let i = 0; i < props.old_data.length; i++) {
                    if (props.old_data[i].id == props.data.id) {
                        // 进行删除操作
                        props.old_data.splice(i, 1)
                       break
                    }

                }
                ShowTip.successBox(`${props.data.name}, 删除成功!`)
            }else{
                ShowTip.errorBox(`${props.data.name}, 删除失败,请稍后再试!`)
            }

        }
    }
}

function onClose() {
    show_search.value = false
}



</script>

<style lang="scss">
.more-container {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end;
}

.more {
    width: 20px;
    margin-right: 20px;
    //justify-content: flex-end !important;
    //justify-self: right;
}

.my-drawer {
    //height: 100% !important;
    height: 800px !important;
    background-color: rgba(199, 255, 245, 0.618) !important;
}
</style>